<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<div class="container">
        <c:forEach items="${tbDirectionList}" var="d">
            <div class="caption">
                <h4 ><a class="nav-bar-a" href="/tiles/profession/${d.PId}">${d.type}</a></h4>
            </div>
            <div class="row">
            <c:forEach items="${tbProfessionList}" var="p">

        <c:if test="${d.PId==p.pid}">




        <div class="col-md-4 col-sm-6 col-xs-12 top-margin">

            <div class="warp-border">
                <div class="clearfix">
                    <div class="icon-people"><img src="${p.img}"></div>
                    <div class="text">
                        <h4 class="">${p.profesion}</h4>
                        <p class="text-present">${p.introduction}</p>
                    </div>
                </div>

                <div class="warp-class2">
                    <div class="warp-class2-text">
                        <div class="iconfont text-padding">门槛 <img src="imges/xx.png"></div>
                    </div>
                    <div class="warp-class2-text">
                        <div class="iconfont text-padding text-border-left">难易程度 <img src="imges/xx.png"><img src="imges/xx.png"></div>
                    </div>
                </div>
                <div class="warp-class2">
                    <div class="warp-class2-text">
                        <div class="iconfont text-padding">成长周期 <span class="iconfont-color">1-3</span>年</div>
                    </div>
                    <div class="warp-class2-text">
                        <div class="iconfont text-padding text-border-left">稀缺程度 <span class="iconfont-color">345</span>家公司需要</div>
                    </div>
                </div>

                <div class="warp-class2">
                    <div class="leftWarp">
                        薪资待遇
                    </div>
                    <div class="rightWarp">
                        <div class="rightWarp-class">
                            <div class="rightWarp-year">0-1年</div>
                            <div class="rightWarp-wages">${p.ondyear}/月</div>
                        </div>
                        <div class="rightWarp-class">
                            <div class="rightWarp-year">1-3年</div>
                            <div class="rightWarp-wages">${p.twoyear}/月</div>
                        </div>
                        <div class="rightWarp-class border-bottom">
                            <div class="rightWarp-year">3-5年</div>
                            <div class="rightWarp-wages">${p.thereyear}/月</div>
                        </div>
                    </div>
                </div>

                <div class="warp-class2">
                    <b class="text-b">有${p.number}人正在学</b>
                </div>
                <div class="warp-class2">
                    <p class="text-p">${p.technology}</p>
                </div>

               <%-- <div class="flip-container">
                    <p class="flip-title">${p.profesion}</p>
                    <p class="flip-text">${p.introduction} </p>
                </div>--%>
            </div>

        </div>

        </c:if>
        </c:forEach>
            </div>
        </c:forEach>

</div>